<style lang="scss" scoped="">
    @import "../utils/base.scss";
    .test{
        width: 100%;
        height: 700px;
    }
    .ivu-tabs-no-animation > .ivu-tabs-content{
        background-color:rgb(243,243,243);
        height: 100%;
        overflow-y: auto;
        // padding-top: 10px;
    }
    .ivu-tabs-nav{
        top:10px;
        padding-left:15px;
    }
    .ivu-tabs .ivu-tabs-tabpane{
        width:100%;
        // height: 400px;
        margin:auto;
        // overflow-y: hidden;
        // padding-bottom: 20px;
    }
    .ivu-tabs-nav-scroll{//tab头
        background-color:white;
        height:50px;
    }
    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        border-bottom: 1px solid #dcdee2;
        border-radius: 4px 4px 4px 4px;
    }
    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-nav-container{
        height:50px;
    }
</style>

<template>
    <mcontent>
        <template slot="left">
			<Menu :open-names="['1']" :active-name="activeName" theme="light" width=""  class="ivu-menu-light" @on-select="changeMenu">
			    <Submenu name="1" v-if="this.$hasPerm('usermanager')">
			        <template slot="title"><Icon type="ios-people" size="16" />用户管理</template>
			        <MenuItem name="config_role" v-if="this.$hasPerm('roleList')">
			            角色配置
			        </MenuItem>
			        <MenuItem name="config_user" v-if="this.$hasPerm('userList')">
			            用户配置
			        </MenuItem>
			        <MenuItem name="dept" v-if="this.$hasPerm('deptList')">
			            组织架构
			        </MenuItem>
			    </Submenu>
				<Submenu name="2" v-if="this.$hasPerm('sysmanager')">
					<template slot="title"><Icon type="md-pie" />系统管理</template>
					<MenuItem name="notice" v-if="this.$hasPerm('sendNotice')">
					     公告发送
					</MenuItem>
					<MenuItem name="taskmanagement" v-if="this.$hasPerm('taskmSet')">
					     任务调度
					 </MenuItem>
				</Submenu>
			</Menu>
        </template>
        <template slot="right" style="height: calc(100vh - 40px);">
            <component :is="showPage"></component>
        </template>
    </mcontent>
</template>
<script>
    import mcontent from "../comp_chatter/mcontent"
    import { mapMutations } from 'vuex';
    import Axios from 'axios'
    import ajax from "../ajax_util"
    import * as types from '../store/types'
    import config_user from "../comp_user/user"
    import config_role from "../comp_user/role"
    import dept from "./dept"
    import notice from "./notice"
    import taskmanagement from "./task_management"

    export default {
        data () {
            return{
                activeName: "",
                showPage: ""
            }
        },
        components:{
            config_role,config_user,mcontent,dept,notice,taskmanagement
        },
        created:function(){
            // this.$store.commit(types.TITLE, 'logout')
            this.getMenu();
        },
        methods:{
            getMenu(){
                if(this.$hasPerm('userList')){
                    this.showPage = "config_user";
                    this.activeName = "config_user";
                }else if(this.$hasPerm('roleList')){
                    this.showPage = "config_role";
                    this.activeName = "config_role";
                }else if(this.$hasPerm('deptList')){
                    this.showPage = "dept";
                    this.activeName = "dept";
                }else if(this.$hasPerm('sendNotice')){
                    this.showPage = "notice";
                    this.activeName = "notice";
                }else if(this.$hasPerm('taskmSet')){
                    this.showPage = "taskmanagement";
                    this.activeName = "taskmanagement";
                }
            },
            changeMenu(name) {
               console.log(name)
                this.showPage = name
             },
            getPageList(page){
                alert(page)
            },
            search(){
                alert(this.processid)
            }
        }
    }
</script>
